<template>
  <div class="contentwarp">
    <div v-show="!showMap" class="contentwarp">
      <el-row class="tableToolsbar">
        <el-col :span="24">
          <el-input placeholder="昵称" v-model="params.Nickname" style="width:100px;" class="input" clearable></el-input>
          <el-select v-model="params.sex" clearable placeholder="性别" style="width:80px">
            <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="params.deviceeSelected" multiple collapse-tags placeholder="请选择布控点">
            <el-option v-for="item in deviceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker style="width:260px" v-model="params.timeSelected" type="daterange" align="right"
            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
          <el-input placeholder="用户ID" v-model="params.uidSelected" style="width:220px;" class="input-with-select"
            clearable>
            <el-select v-model="params.uidTypeSelected" style="width:90px;" slot="prepend" placeholder="ID类型">
              <el-option label="UID" value="1"></el-option>
              <el-option label="V1_ID" value="2"></el-option>
              <el-option label="V2_ID" value="3"></el-option>
            </el-select>
          </el-input>
          <el-select v-model="params.citySelected" style="width:100px;" clearable placeholder="城市">
            <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input placeholder="距离" style="width:150px;" clearable v-model="params.distance">
            <template slot="append">米</template>
          </el-input>
          <el-button @click="searchData" icon="el-icon-search"></el-button>
        </el-col>
      </el-row>
      <el-table :stripe="true" fixed="left" :data="nearByData" :border="true" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            V1_ID:{{props.row.v1_id}}<br />
            V2_ID:{{props.row.v2_id}}
          </template>
        </el-table-column>

        <el-table-column label="UID" width="100">
          <template slot-scope="scope"> {{scope.row.uid}} </template>
        </el-table-column>
        <el-table-column label="头像" width="68"><template slot-scope="scope"><img class="avatar" :src="scope.row.avatar_small" /></template></el-table-column>
        <el-table-column label="性别" width="90">
          <template slot-scope="scope"> {{scope.row.gender == 1 ? '男' : '女'}} </template>
        </el-table-column>
        <el-table-column prop="name" label="昵称"></el-table-column>
        <el-table-column label="城市">
          <template slot-scope="scope"> {{scope.row.country}}{{scope.row.province == '' ? '' :
            '-'+scope.row.province}}{{ scope.row.city == '' ? '' : '-'+scope.row.city }} </template>
        </el-table-column>
        <el-table-column prop="distance" label="距离"></el-table-column>
        <el-table-column prop="equiment_id" label="布控点"></el-table-column>
        <el-table-column prop="created_at" label="时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="showMapLog(scope.$index)" class="el-icon-zoom-in"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="changeData" :current-page="params.currentPage" :page-size="params.dataSize"
        layout="total, prev, pager, next" :total="dataTotal"></el-pagination>
    </div>
    <el-row v-show="showMap" class="tableToolsbar">
      <el-col :span="24">
        <img class="avatar" style="width:32px;height:32px;" :src="currentInfo.avatar_small">
        <el-button>UID:{{currentInfo.uid}} | 昵称: {{currentInfo.name}} | {{currentInfo.gender == 2 ? '女' : '男'}}</el-button>
        <el-select v-model="params.deviceeSelected" multiple collapse-tags placeholder="请选择布控点">
          <el-option v-for="item in deviceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker style="width:260px" v-model="params.timeSelected" type="daterange" align="right" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        <el-button icon="el-icon-search" @click="searchData"></el-button>
      </el-col>
    </el-row>
    <div v-show="showMap" id="qqmap"></div>
    <div v-show="showMap" class="peopleInfo">
      <ul class="infoList">
        <li class="item" v-for='(item,index) in deviceData'>
          <el-tooltip class="item" effect="dark" :content="item.address" placement="top-start">
            <span class="address" v-text='item.address'></span>
          </el-tooltip>
          <span class="updated_at" v-text='item.updated_at'></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { TMap } from '../../utils/tmap'
  export default {
    data() {
      return {
        params: {
          Nickname: '',
          sex: '',
          deviceeSelected: '',
          timeSelected: '',
          uidSelected: '',
          uidTypeSelected: '1',
          citySelected: '',
          distance: '',
          currentPage: 1,
          dataSize: 7,
        },
        dataTotal: 0,
        nearByData: [],
        deviceData: [
          {
            phone: "-",
            isCheck: true,
            address: "北京市海淀区永泰庄北路东升镇",
            created_at: "2018-12-13 16:37:36",
            desc: "vx10001号设备6.0.2-root",
            dstatus: "1",
            id: 1,
            latitude: "40.04271274583365",
            longitude: "116.37735307216644",
            name: "VX10001",
            place_id: 1,
            status: 1,
            uniqid: "355136055872165",
            updated_at: "2018-12-13 16:37:36",
          }, {
            address: "北京市朝阳区安立路奥运村街道",
            created_at: "2018-12-13 16:36:48",
            desc: "vx10002号设备6.0.1-root",
            dstatus: "2",
            id: 2,
            isCheck: true,
            latitude: "40.010902184902676",
            longitude: "116.40662133693695",
            name: "VX10002",
            phone: "-",
            place_id: 2,
            status: 2,
            uniqid: "861571030993305",
            updated_at: "2018-12-13 16:36:48",
          }, {
            address: "北京市朝阳区背街小巷来广营乡",
            created_at: "2018-12-13 16:59:21",
            desc: "vx10001号设备6.0.2-root",
            dstatus: "1",
            id: 3,
            isCheck: true,
            latitude: "40.030095455398026",
            longitude: "116.42953813076019",
            name: "VX10001",
            phone: "-",
            place_id: 1,
            status: 1,
            uniqid: "355136055872165",
            updated_at: "2018-12-13 16:59:21",
          }, {
            address: "北京市昌平区天通苑南街道",
            created_at: "2018-12-13 17:44:54",
            desc: "vx10001号设备6.0.2-root",
            dstatus: "1",
            id: 4,
            isCheck: true,
            latitude: "40.04317270710705",
            longitude: "116.39589250087738",
            name: "VX10001",
            phone: "-",
            place_id: 1,
            status: 1,
            uniqid: "355136055872165",
            updated_at: "2018-12-13 17:44:54",
          }
        ],
        sexOptions: [{ value: '1', label: '女' }, { value: '2', label: '男' }],
        // 快捷周期
        pickerOptions: {
          // 限定时间
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        citys: [{ value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' }],
        currentIndex: 0,
        showMap: false,
        currentInfo: [],
        peopleInfo: [
          { time: '3213123', name: '设备一', lat: '39.930456', lng: '116.387554' },
          { time: '2323232', name: '设备二', lat: '39.929008', lng: '116.414162' },
          { time: '3223233', name: '设备三', lat: '39.908206', lng: '116.416908' },
        ],
        circles: [],
        markers: [],
        labels: [],
        polylines: [],
      }
    },
    computed: {
      ...mapGetters([
        'GetQQMapKey'
      ])
    },
    methods: {
      loadData: function () {
        console.log(this.params)
        let that = this
        this.$axios.get(this.APIURL + '/nearby/list', { params: this.params }).then(function (response) {
          if (response !== false) {
            that.nearByData = []
            that.nearByData = response.data
            that.dataTotal = parseInt(response.total)
            console.log(that.nearByData)
          }
        })
      },
      changeData: function (pages) {
        this.params.currentPage = pages
        this.loadData()
      },
      searchData: function () {
        this.params.currentPage = 1
        this.loadData(1)
      },
      showMapLog: function (index) {
        this.currentIndex = index
        this.currentInfo = this.nearByData[index]
        this.showMap = true;
        let data = []
        let that = this;
        this.clearOverlays(this.polylines);
        this.clearOverlays(this.circles);
        this.clearOverlays(this.markers);
        this.clearOverlays(this.labels);
        that.map.panTo(new qq.maps.LatLng(that.deviceData[0].latitude, that.deviceData[0].longitude));
        for (let i of this.deviceData) {
          this.addMarker(i.latitude, i.longitude, i.address, i.isCheck)
          data.push(new qq.maps.LatLng(i.lat, i.lng))
        }
      },
      closeMap: function () {
        this.showMap = false
      },
      //添加点和圆
      addMarker: function (lat, lng, address, isCheck) {
        let that = this
        var center = new qq.maps.LatLng(lat, lng);
        var anchor = new qq.maps.Point(6, 6),
          size = new qq.maps.Size(24, 24),
          origin = new qq.maps.Point(0, 0),
          icon = new qq.maps.MarkerImage('https://lbs.qq.com/javascript_v2/img/center.gif', size, origin, anchor);
        var marker = new qq.maps.Marker({
          icon: icon,
          position: center,
          animation: qq.maps.MarkerAnimation.DROP,
          map: that.map
        });
        let color = isCheck ? new qq.maps.Color(0, 191, 255, 0.6) : new qq.maps.Color(0, 0, 0, 0.4)
        qq.maps.event.addListener(marker, 'click', function (event) {
          that.oneDotData(event)
        });
        var circle = new qq.maps.Circle({
          map: that.map,
          center: center,
          radius: 500,
          fillColor: color,
          strokeWeight: 0
        });
        var label = new qq.maps.Label({
          position: center,
          map: that.map,
          content: address
        });
        let trailData = [];
        this.clearOverlays(this.polylines)
        for (let i of this.deviceData) {
          if (i.isCheck) {
            trailData.push(new qq.maps.LatLng(i.latitude, i.longitude))
          }
        };
        let polyline = new qq.maps.Polyline({
          path: trailData,
          strokeColor: '#FF0000',
          strokeWeight: 2,
          editable: false,
          map: that.map,
        });
        that.polylines.push(polyline)
        that.circles.push(circle)
        that.markers.push(marker)
        that.labels.push(label)
      },
      //清除覆盖物
      clearOverlays: function (overlays) {
        var overlay;
        while (overlay = overlays.pop()) {
          overlay.setMap(null);
        }
      },
      initMap: function () {
        let that = this
        TMap('BH3BZ-OWLW6-6KNSQ-MHGH5-ABJHZ-4KFW6').then(qq => {
          that.qq = qq
          that.center = new qq.maps.LatLng(40.01945601727397, 116.46899342536926)
          that.map = new qq.maps.Map(document.getElementById('qqmap'), {
            // 地图的中心地理坐标。
            center: that.center,
            zoom: parseInt(15),
            disableDefaultUI: true
          })
          that.geocoder = new qq.maps.Geocoder()
          function CloseController(controllDiv, map) {
            controllDiv.style.padding = '5px'
            controllDiv.style.backgroundColor = '#ffffff'
            controllDiv.style.cursor = 'pointer'
            controllDiv.innerHTML = '关闭地图'
            controllDiv.addEventListener('click', function () {
              that.showMap = false
            }, false)
          }
          let customZoomDiv = document.createElement('div')
          // 关闭地图按钮
          that.customZoomControl = new CloseController(customZoomDiv, that.map)
          // 将控件添加到controls栈变量并将其设置在顶部位置
          that.map.controls[qq.maps.ControlPosition.TOP_RIGHT].push(customZoomDiv)
          // 调用Poi检索类
          that.searchService = new that.qq.maps.SearchService({
            map: that.map
          })
          // 监听点击事件
          that.qq.maps.event.addListener(that.map, 'click', function (event) {
            that.$confirm('是否设定当前位置?', '提示', { confirmButtonText: '是', cancelButtonText: '否', type: 'warning' }).then(() => {
              that.showMarker(that.currentIndex, event.latLng.getLat(), event.latLng.getLng())
              that.setDeviceMap(event.latLng)
            })
          })
        })
      }
    },
    mounted: function () {
      this.initMap()
      this.loadData()
    }
  }
</script>

<style scoped>
  .tableToolsbar {
    margin-bottom: 10px;
  }

  .peopleInfo {
    width: 250px;
    height: 90%;
    position: absolute;
    top: 75px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }

  .peopleInfo ul {
    padding: 0;
  }

  .peopleInfo ul li {
    list-style: none;
    height: 40px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    display: flex;
    color: #fff;
  }

  .peopleInfo ul .item .address {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 40px;
    padding: 0 5px 0 0;
    color: #fff;
    text-align: center;
  }

  .peopleInfo ul .item .updated_at {
    width: 100px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
  }
</style>